import React, { PureComponent } from 'react';
import { Modal  } from 'antd';

let mapChild;
let trafficChild;
const bmapCarIcon = require("../../../../public/arrow.png");
const dBody = document.body;

class MsgModalMap extends PureComponent {

  state = {
    mapHeight:dBody.clientHeight*0.8,
  }

  componentDidMount() {
    mapChild = new BMap.Map("bMapDiv");
    mapChild.enableScrollWheelZoom(true);
    this.addMapMarker()
  }

  addMapMarker = () =>{
    const { lng,lat,drivingDirection,showTraffic } = this.props;

    var pt = new BMap.Point(lng, lat);
    mapChild.centerAndZoom(pt, 19);
    var myIcon = new BMap.Icon(bmapCarIcon, new BMap.Size(32,32));
    var marker2 = new BMap.Marker(pt,{icon:myIcon});  // 创建标注
    if(drivingDirection != null){
      marker2.setRotation(drivingDirection);
    }
    mapChild.addOverlay(marker2);
    mapChild.addControl(new BMap.MapTypeControl());          //添加地图类型控件
    trafficChild = new BMap.TrafficLayer();
    mapChild.addTileLayer(trafficChild);

  }

  render() {
    const {  mapHeight} = this.state;

    return (
      <div id="bMapDiv" style={{width:"100%",height:mapHeight}}></div>
    );
  }
}

export default MsgModalMap;
